<template>
  <div class="page2 backgroundImg" id="page2">
  </div>
</template>
<script lang="ts" setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap";
onMounted(() => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    300
  );
  camera.position.set(0, 0, 18);
  scene.add(camera);
  // 弹跳小球
  const sphereGroup = new THREE.Group();
  const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
  const spherematerial = new THREE.MeshStandardMaterial({
    side: THREE.DoubleSide,
  });
  const sphere = new THREE.Mesh(sphereGeometry, spherematerial);
  sphere.castShadow = true;
  sphereGroup.add(sphere);
  const planeGeometry = new THREE.PlaneGeometry(60, 20);
  const plane = new THREE.Mesh(planeGeometry, spherematerial);
  plane.position.set(0, -3, 0);
  plane.rotation.x = -Math.PI / 2;
  plane.receiveShadow = true;
  sphereGroup.add(plane);
  const smallBall = new THREE.Mesh(
    new THREE.SphereGeometry(0.3, 20, 20),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
  );
  smallBall.position.set(2, 2, 2);
  const pointLight = new THREE.PointLight(0xff0000, 10);
  pointLight.castShadow = true;

  pointLight.shadow.radius = 20;
  pointLight.shadow.mapSize.set(512, 512);

  smallBall.add(pointLight);
  sphereGroup.add(smallBall);

  sphereGroup.position.set(0, -20, 0);
  scene.add(sphereGroup);
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  window.addEventListener("mousemove", (event) => {
    mouse.x = event.clientX / window.innerWidth - 0.5;
    mouse.y = event.clientY / window.innerHeight - 0.5;
  });
  window.addEventListener("click", (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -((event.clientY / window.innerHeight) * 2 - 1);
    raycaster.setFromCamera(mouse, camera);
  });
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  renderer.useLegacyLights = false;
setTimeout(() => {
   let div = document.getElementById("page2");
  div.appendChild(renderer.domElement);
}, 500);
 
  // 设置时钟
  const clock = new THREE.Clock();
  gsap.to(smallBall.position, {
    x: -3,
    duration: 6,
    ease: "power2.inOut",
    repeat: -1,
    yoyo: true,
  });
  gsap.to(smallBall.position, {
    y: 0,
    duration: 0.5,
    ease: "power2.inOut",
    repeat: -1,
    yoyo: true,
  });
  function render() {
    let deltaTime = clock.getDelta();
    //   根据当前滚动的scrolly，去设置相机移动的位置
    camera.position.y = -(window.scrollY / window.innerHeight ) * 30;
    // 摇晃效果  因为越移动  mouse.x * 10 - camera.position.x越小 所以看上去有惯性  移动后mouse.x不变 另外一个变大
    camera.position.x += (mouse.x * 10 - camera.position.x) * deltaTime * 5;
    //   controls.update();
    renderer.render(scene, camera);
    //   渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
  }
  render();
//   window.addEventListener("scroll", () => {
//   // 用这个来判是哪个页面
//   let currentPage=0
//   const newPage = Math.round(window.scrollY / window.innerHeight);
//   if (newPage != currentPage) {
//     currentPage = newPage;
    gsap.to(sphereGroup.position, {
      y: -10,
      duration: 2,
    });
//   }
// });
  window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
  });
});
</script>

<style scoped lang="scss">
.page2 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* position: absolute; */
  
}
::-webkit-scrollbar {
  display: none;
}
</style>
